<template>
  <div class="box1">
    <header class="header">
      <van-search
        v-model="value"
        show-action
        label="商品分类"
        placeholder="Apple新品上市"
        @search="onSearch"
      >
      </van-search>
    </header>
    <main class="contet">
      <div class="sideBar">
        <van-sidebar v-model="active" @change="onChange" class="left1">
  <van-sidebar-item title="食品" />
  <van-sidebar-item title="电器" />
  <van-sidebar-item title="洗护" />
   <van-sidebar-item title="女装" />
  <van-sidebar-item title="手机" />
   
</van-sidebar>
 <div class="right">
     <ul>
        <li v-for="item in list" :key="item.id">
            <p><img :src="item.image" alt=""></p>
            <p>{{item.title}}</p>
        </li>
     </ul>
 </div>
      </div>
    </main>
  </div>
</template>
<script setup >
import request from "@/utils/request";
import { ref, onMounted } from "vue";
const list=ref([])
const active = ref(0);
const onChange=(index)=>{
    let arr =["食品","电器","洗护","女装","手机"]
    request.get('/kind',{
        params:{
            key:arr[index]
        }
    }).then((res) => {
      if (res.data.code == 200) {
        list.value = res.data.data;
      }
    });
}


</script>

<style lang="scss" >
.sideBar{
    display: flex;
    .left1{
        position: fixed;
    }
    .right{
        margin-left: 150px;
    }
}
</style>
